<template>
    <div class="el-tree-select" style="width:100%">
        <el-cascader ref="projectCascader"
                     :options="projectOptions"
                     :props="projectProps"
                     v-model="projectIds"
                     :show-all-levels="true"
                     size="large"
                     filterable
                     placeholder="请选择项目">
        </el-cascader>
    </div>
</template>

<script setup lang="ts">
import {defineEmits, nextTick, watch} from "@vue/runtime-core";
import {queryProjectList} from "@/api/train/project";
import type {CascaderProps} from 'element-plus'
import {ref} from "vue";

const emits = defineEmits(["getProjectIds"])

// 选择项目数组数据
const projectOptions = ref([])
// 项目级联选择配置信息
const projectProps: CascaderProps = {
    expandTrigger: 'click',
    checkStrictly: true,
    value: "projectId",
    label: "projectName",
    children: "childrenList"
}

const projectIds = ref([])
const props = defineProps({
    lessonId: {
        required: true,
        type: Number
    },
    projectIds: {
        type: Array,
        default: []
    }
})

function queryList() {
    queryProjectList(props.lessonId).then(response => {
        let projectList = response.data
        disableProjectCascaderData(projectList, [])
        projectOptions.value = projectList
    })
}

const disableProjectCascaderData = (data, disableArray) => {
    for (let i = 0; i < data.length; i++) {
        let project = data[i]
    }
}

//监听数据变化
watch(
    () => projectIds.value,
    () => {
      emits("getProjectIds", projectIds.value)
    },
    {immediate: true}
)

watch(
    () => props.projectIds,
    () => {
      projectIds.value = props.projectIds
    },
    {immediate: true}
)

nextTick(()=>{
  projectIds.value = props.projectIds
})

queryList();

defineExpose({queryList})
</script>

<style lang='scss' scoped>
:deep(.el-cascader--large) {
  width: 100%
}
</style>
